﻿@{
    //ViewBag.Title = "房间管理";
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房间管理 - 金福源月子中心</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/Assets/Hplus/css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="/Assets/Hplus/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/Assets/Hplus/css/animate.css" rel="stylesheet">
    <link href="/Assets/Hplus/css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a89dc;
            --success-color: #48cfad;
            --warning-color: #f6bb42;
            --danger-color: #ed5565;
            --light-gray: #f5f7fa;
            --dark-gray: #656d78;
        }

        .room-container {
            padding: 20px;
            background-color: #f8f9fa;
        }

        .floor-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

            .floor-header h2 {
                margin: 0;
                color: var(--primary-color);
                font-weight: 600;
            }

        .room-card {
            margin-bottom: 20px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            overflow: hidden;
        }

            .room-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 25px rgba(0,0,0,0.12);
            }

            .room-card .card-body {
                padding: 20px;
            }

            .room-card h3 {
                color: var(--primary-color);
                margin-bottom: 15px;
                font-weight: 600;
            }

            .room-card p {
                margin-bottom: 8px;
                color: var(--dark-gray);
            }

        .room-status {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .status-available {
            background-color: #e8f8f0;
            color: var(--success-color);
        }

        .status-occupied {
            background-color: #ffebee;
            color: var(--danger-color);
        }

        .status-reserved {
            background-color: #fff8e1;
            color: var(--warning-color);
        }

        .room-features {
            display: flex;
            flex-wrap: wrap;
            margin-top: 15px;
        }

        .feature-badge {
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 4px 8px;
            background-color: var(--light-gray);
            border-radius: 4px;
            font-size: 12px;
        }

        .room-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #f9f9f9;
            border-top: 1px solid #eee;
        }
        /* 新增按钮样式 */
        .room-header {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
            padding: 0 20px;
        }

        /* 弹窗表单样式 */
        .add-room-form {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

            .form-group label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
            }
    </style>
</head>
<body class="gray-bg">
    <div class="room-container" id="roomContainer">
        <div class="room-header">
            <button id="addRoomBtn" class="btn btn-primary">
                <i class="fa fa-plus"></i> 添加房间
            </button>
        </div>
        <div class="layui-card">
            <div class="wrapper wrapper-content animated fadeInRight">
                @{
                    var roomsByFloor = ((IEnumerable<JinfuyuanProject.Entity.HomeVM>)ViewBag.HomeVM)
                                .GroupBy(r => r.Floors)
                                .OrderBy(g => g.Key);
                }

                @foreach (var floorGroup in roomsByFloor)
                {
                    <div class="floor-header">
                        <h2><i class="fa fa-building"></i> @floorGroup.Key 楼层</h2>
                        <span class="text-muted">共 @floorGroup.Count() 间房间</span>
                    </div>
                    <input type="hidden" id="floor" value="@roomsByFloor.LastOrDefault().Key"/>
                    <div class="row">
                        @foreach (var room in floorGroup)
                        {
                            <div class="col-lg-4 col-md-6">
                                <div class="room-card">
                                    <div class="card-body">
                                        <h3>
                                            <i class="fa fa-home"></i> @room.Name 号房
                                            @if (room.State == 0)
                                            {
                                                <span class="room-status status-available">可预订</span>
                                            }
                                            else if (room.State == 1)
                                            {
                                                <span class="room-status status-occupied">已入住</span>
                                            }
                                            else
                                            {
                                                <span class="room-status status-reserved">已预约</span>
                                            }
                                        </h3>

                                        <div class="room-features">
                                            <span class="feature-badge"><i class="fa fa-arrows-alt"></i> @room.Area㎡</span>
                                            <span class="feature-badge"><i class="fa fa-compass"></i> @room.Direction</span>
                                            <span class="feature-badge"><i class="fa fa-gift"></i> @room.PackageName</span>
                                        </div>

                                        @if (room.State == 1)
                                        {
                                            <div class="mt-3">
                                                <p><i class="fa fa-user"></i> 产妇: @room.ParturientName</p>
                                                <p><i class="fa fa-calendar"></i> 已入住: @room.DaysStayed 天</p>
                                            </div>
                                        }
                                    </div>

                                    <div class="room-card-footer">
                                        <span><i class="fa fa-map-marker"></i> @floorGroup.Key 楼</span>
                                        <a href="/Room/RoomDetail/@room.Id" class="btn btn-sm btn-primary">查看详情</a>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
        <input type="hidden" value='@Html.Raw(ViewBag.Package)' id="hfPackage"/>
    </div>

    <!-- 全局js -->
    @*<script src="/Assets/Hplus/js/jquery.min.js?v=2.1.4"></script>*@
    <script src="/Assets/Hplus/js/bootstrap.min.js?v=3.3.7"></script>
    <script src="/Assets/Hplus/js/content.js?v=1.0.0"></script>
    <script>
        $(document).ready(function () {
            // 卡片悬停动画
            $('.room-card').hover(
                function () {
                    $(this).addClass('animate__animated animate__pulse');
                },
                function () {
                    $(this).removeClass('animate__animated animate__pulse');
                }
            );

            // 使用 Layui 的弹出层
            layui.use('layer', function () {
                var layer = layui.layer;
                var $ = layui.$;
                $('.room-card-footer a').on('click', function (e) {
                    e.preventDefault();
                    var url = $(this).attr('href');
                    layer.open({
                        title: '房间详情 - ' + $(this).closest('.room-card').find('h3').text(),
                        type: 2,
                        area: ['60%', '80%'],
                        maxmin: true,
                        content: url,
                    });
                    return false;
                });
            });

            $('#addRoomBtn').click(function () {
                layui.use('layer', function () {
                    var layer = layui.layer;

                    layer.open({
                        title: '添加新房间',
                        type: 1,
                        area: ['500px', 'auto'],
                        content: `
                            <div class="add-room-form">
                                <div class="form-group">
                                    <label>房间号：</label>
                                    <input type="text" class="form-control" id="roomNumber">
                                </div>
                                <div class="form-group">
                                    <label>所属楼层：</label>
                                    <select class="form-control" id="floorNumber">
                                    ${generateFloorOptions()}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>房间面积（㎡）：</label>
                                    <input type="number" class="form-control" id="roomArea">
                                </div>
                                <div class="form-group">
                                    <label>套餐：</label>
                                    <select class="form-control" id="packageId">
                                    ${generatePackageOptions()}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>朝向：</label>
                                    <input type="text" class="form-control" id="Direction">
                                </div>
                                <button class="btn btn-primary btn-block" onclick="submitRoom()">提交</button>
                            </div>
                        `,
                        success: function (layero, index) {
                            // 初始化表单验证
                            $('#roomNumber').focus();
                        }

                    });
                });
            });
            // 提交表单函数
            window.submitRoom = function () {
                // 获取表单数据
                const roomData = {
                    Name: $("#roomNumber").val(),
                    Floors: $("#floorNumber").val(),
                    Area: $("#roomArea").val(),
                    PackageId: $("#packageId").val(), 
                    Direction: $("#Direction").val()
                };
                // 验证必填字段
                if (!roomData.Name || !roomData.Floors) {
                    layui.layer.msg('房间号和楼层不能为空', { icon: 2 });
                    return;
                }
                console.log(roomData)
                $.post('/Room/AddRoom', roomData, function (resp) {
                    if (resp.code == 0) {
                        layui.layer.msg('添加成功', { icon: 1 });
                        setTimeout(() => {
                            layui.layer.closeAll();
                            location.reload(); // 刷新页面
                        }, 1500); 
                    }
                })
            }
        });
        // 动态生成套餐选项函数
        function generatePackageOptions() {
            const rawJson = $("#hfPackage").val() || "[]";
            const sanitizedJson = rawJson.replace(/'/g, "\\'");
            const packages = JSON.parse(sanitizedJson);
            return packages.map(pkg =>
                `<option value="${pkg.Id}">${pkg.PackageName}</option>`
            ).join('');
        }
        // 动态生成楼层选项函数
        function generateFloorOptions() {
            var count = $("#floor").val()
            count++
            let options = '';
            for (var i = 1; i <= count; i++) {
                options += `<option value="${i}">${i}楼</option>`;
            }
            return options;
        }
    </script>
</body>
</html>